<template>
    <div id="main">
        <!-- 头像 -->
        <img src="@/assets/image/head_pic@3x.png" alt="" />
        <span class="username">{{ userInfo.username }}</span>
        <!-- 操作列 -->
        <div id="operation">
            <div
                :class="['operation-item', index != operation.length - 1 ? 'uderline' : '']"
                v-for="(item, index) in operation"
                :key="index"
                @click="handleOperation(item)"
            >
                <div class="left">
                    <img :src="item.pic" alt="" />
                    <span>{{ item.descs }}</span>
                </div>
                <img src="@/assets/image/right.png" alt="" />
            </div>
        </div>
    </div>
    <!-- 修改密码弹框 -->
    <teleport to="body">
        <div class="mask" v-if="isShow">
            <div class="dialog">
                <Form ref="form" :formData="formData" @updatePasword="updatePasword" />
                <div class="btns">
                    <button class="btn btn-cancel" @click="isShow = false">取消</button>
                    <button class="btn btn-sure" @click="chekValue">确定</button>
                </div>
            </div>
        </div>
    </teleport>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Form from '@/components/Form'

export default defineComponent({
    name: 'My',
    components: { Form },
    emits: ['updatePasword'],
    setup() {
        const data = reactive({
            formData: {
                oneLabel: '旧密码',
                twoLabel: '新密码',
                oneInput: '请输入旧密码',
                twoInput: '请输入新密码',
                username: '',
                password: '',
                oldPassword: '',
                type: 'password',
                color: '#068878'
            },
            isShow: false,
            userInfo: { username: '', password: '' },
            operation: [
                { pic: require('@/assets/image/update_password@3x.png'), descs: '修改密码' },
                { pic: require('@/assets/image/add_user@3x.png'), descs: '添加客户' },
                { pic: require('@/assets/image/login_out@3x.png'), descs: '退出登录' }
            ]
        })
        const router = useRouter()
        const form = ref(null)
        // 方法
        function handleOperation(value) {
            if (value.descs === '退出登录') {
                // 清除sessionStorage数据
                sessionStorage.clear()
                // 退出登录接口调用
                // ***********
                // 返回登录界面
                router.push('/login')
            } else if (value.descs === '修改密码') {
                data.isShow = true
            } else if (value.descs === '添加客户') {
                router.push('/addUser')
            }
        }
        // 修改密码
        const updatePasword = value => {
            // 查看校验是否通过
            if (value) {
                // 调用修改密码接口
                // 重新登陆
                console.log('修改成功!,新密码：', value)
                // router.push('/login')
            }
        }

        // 触发子组件校验数据
        const chekValue = () => {
            form.value.chekAllValue('updatePassword')
        }
        // 初始化
        onMounted(() => {
            // 调用根据openid获取用户信息接口
            // *************
            // 存储用户信息
            data.userInfo.username = 'kk'
            data.userInfo.password = '666'
            data.formData.oldPassword = '666'
        })
        return {
            ...toRefs(data),
            form,
            handleOperation,
            updatePasword,
            chekValue
        }
    }
})
</script>

<style scoped lang="scss">
#main {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;

    // 头像
    img {
        width: 82px;
        height: 82px;
        margin-top: 37px;
    }

    .username {
        margin-top: 5px;
        font-size: 16px;
        font-weight: 600;
    }

    // 操作列
    #operation {
        width: 100%;
        margin-top: 26px;
        overflow: hidden;
        background-color: white;
        border-radius: 18px;

        .operation-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;

            .left {
                display: flex;
                align-items: center;
                justify-content: start;

                img {
                    width: 50px;
                    height: 50px;
                    margin-left: 23px;
                }

                span {
                    margin-left: 10px;
                }
            }

            img {
                width: 20px;
                height: 20px;
                margin: 0 18px 0 0;
            }
        }
    }
}

.uderline {
    border-bottom: 1px solid #f7f7ff;
}

// 弹窗
.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba($color: #000, $alpha: 0.3);

    .dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80vw;
        height: 228px;
        padding: 0 20px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 2px 2px 20px 1px rgb(0 0 0 / 10%);
        transform: translate(-50%, -50%);

        // 按钮组
        .btns {
            display: flex;
            justify-content: space-between;

            .btn {
                width: 100px;
                height: 30px;
                margin-top: 10px;
                text-align: center;
                border: none;
                border-radius: 20px;
                outline: none;
            }

            .btn-cancel {
                color: black;
                background-color: white;
                border: 1px solid #eee;
            }

            .btn-sure {
                color: white;
                background-color: #068878;
            }
        }
    }
}
</style>
